<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jsonp跨域请求</title>

  <style>
    #show {
      width: 500px;
      height: 280px;
      margin-top: 10px;
      text-align: center;
      border: 1px solid #000;
    }

    #show div {
      width: 400px;
      height: 110px;
      margin: 10px auto;
      border: 1px solid #000;
    }
  </style>

</head>

<body>

  <h1>你好，这里是JSONP测试页面！</h1>

  <h2>请输入用户名和密码来获取您的数据！</h2>

  <span>用户名：</span> <input type="text" placeholder="请输入用户名..." id="user">
  <span>密 &nbsp 码：</span> <input type="password" placeholder="请输入密码..." id="psd">
  <button id="btn">提交</button>
  <div id="show">这里是数据显示区域：
    <div id="userInfo">用户信息：</div>
    <div id="data">匹配数据：</div>
  </div>


  <script>
    // dom元素
    const doms = {
      user: document.querySelector('#user'),
      psd: document.querySelector('#psd'),
      btn: document.querySelector('#btn'),
      userInfo: document.querySelector('#userInfo'),
      data: document.querySelector('#data')
    }

    const urls = ['http://localhost:8000/jsonp?cb=getData']

    // 提交按钮 提交之后 向后台发送请求 获取数据 将用户信息和数据展示到前端
    doms.btn.addEventListener('click', () => {

      // 用户信息区域
      let strP = `<p>用户名：${doms.user.value}</p>
                  <p>密  码：${doms.psd.value}</p>
      `
      doms.userInfo.innerHTML = strP

      // 用户数据区域
      jsonpRequest(urls[0] + `&user=${doms.user.value}&password=${doms.psd.value}`)
    })

    // 假设有一个获取数据的函数
    function getData(data) {

      console.log(data)

      if (data.err) {
        console.log(data.err)

        doms.data.innerHTML = `<p>${data.err}</p>`
        return
      }

      let strD = `<p>数 据：${data.datas}</p>
                  <p>资 料：${data.files}</p>
      `
      doms.data.innerHTML = strD

    }

    function jsonpRequest(url) {
      // 在页面中创建一个标签
      const script = document.createElement('script')

      // 跨域请求资源 请求本地Server中的资源
      script.src = url

      // 将 script 标签引入
      document.body.appendChild(script)

      // 加载成功即删除
      script.onload = function () {
        console.log(this)
        this.parentNode.removeChild(this)
      }
    }
  </script>
</body>

</html>